<template>
  <div>
    <!-- 锚点导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>
        <a href="#/home">首页</a>
      </el-breadcrumb-item>-->
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 提示信息区域 -->
      <el-alert title="添加商品信息" type="info" center show-icon :closable="false">
      </el-alert>
      <!-- 步骤条区域   :space="200" 滚动条间间距-->
      <el-steps :active="currentTabSelName - 0" align-center finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- tab页签区域 -->
      <el-form :model="TagRuleForm" :rules="TagRuleFormRules" ref="TagRuleFormRulesRef" label-width="100px"
        label-position="top" class="demo-ruleForm">
        <!-- :before-leave： tab页签 切换前钩子函数 参数分别是切换前后的name -->
        <el-tabs v-model="currentTabSelName" :before-leave="beforeTabLeave" :tab-position="tabPosition"
          @tab-click="handleTagClick">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="0">
            <!-- 表单项 -->
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="TagRuleForm.goods_name"></el-input>
            </el-form-item>
            <!-- 表单项 -->
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="TagRuleForm.goods_price" type="number"></el-input>
            </el-form-item>
            <!-- 表单项 -->
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="TagRuleForm.goods_weight" type="number"></el-input>
            </el-form-item>
            <!-- 表单项 -->
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="TagRuleForm.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item>
              <el-form-item label="商品分类" prop="goods_cat">
                <el-cascader expand-trigger="hover" v-model="TagRuleForm.goods_cat" :options="categoriesList"
                  :props="baseCateListProps" @change="baseHandleChange"></el-cascader>
              </el-form-item>
            </el-form-item>
          </el-tab-pane>
          <!-- 商品参数 -->
          <el-tab-pane label="商品参数" name="1">
            <!-- 商品参数  -->
            <el-form-item v-for="(item,index) in manyDataList" :label="item.roleName" :key="item.id">
              <!-- 多选checkbox    manyDataList:默认选中的每一项的checkbox-->
              <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox :label="i" v-for="(i,idx) in item.attr_vals" :key="i" border>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <!-- 商品属性 -->
          <el-tab-pane label="商品属性" name="2">
            <el-form-item v-for="(item,index) in onlyDataList" :key="item.id" :label="item.roleName">
              <el-input v-model="item.roleDesc"></el-input>
            </el-form-item>
          </el-tab-pane>
          <!-- 商品图片 -->
          <el-tab-pane label="商品图片" name="3">
            <!--action:图片上传地址  :file-list="fileList": 上传的图片数组  如果是点击弹出框上传 不需考虑这个属性 去掉该属性即可
              list-type：上传图片展示方式  header:设置图片上传请求头token   :on-success: 文件上传成功时的钩子-->
            <el-upload class="upload-demo" :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove"
              :file-list="fileList" list-type="picture" :header="headerObj" :on-success="handleSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- 提示语 -->
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </el-tab-pane>
          <!-- 商品内容区域 -->
          <el-tab-pane label="商品内容" name="4">
            <!-- 富文本编辑器区域 -->
            <quill-editor v-model="TagRuleForm.quillEditorVal"></quill-editor>

            <!-- 保存商品按钮 -->
            <el-button type="primary" class="addProductBtn" @click="addProductBtn">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>

    <!-- 图片预览的dialog -->
    <el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%">
      <!-- 添加表单区域 -->
      <img :src="previewFilePath" alt="预览图片" class="previewImg">
    </el-dialog>
  </div>
</template>

<script>
  //引入第三方lodash库
  import _ from 'lodash'

  export default {
    // 组件名称
    name: 'demo',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return {
        //保存当前步骤条的选中索引
        // currentActiveIndex: 0,
        //tab页签切换位置
        tabPosition: 'left',
        //tabs页当前签激活的name绑定值
        currentTabSelName: "0",
        //tab页签的表单数据
        TagRuleForm: {
          goods_name: '',
          goods_price: 0,
          goods_weight: 0,
          goods_number: 0,
          //级联选择框的绑定值 为数组
          goods_cat: [],
          //图片上传成功后临时路径 对象{pic: '上传服务器返回临时路径'}
          pics: [],
          // 富文本编辑器绑定值
          quillEditorVal: "",
          //提交数据需要的 静态参数/动态参数 数组 {attr_id:'',attr_value: ''} push到attrs中
          attrs: []
        },
        //tab页签的表单数据验证规则
        TagRuleFormRules: {
          goods_name: [
            { required: 'true', message: '请输入商品名称', trigger: 'blur' }
          ],
          goods_price: [
            { required: 'true', message: '请输入商品价格', trigger: 'blur' }
          ],
          goods_weight: [
            { required: 'true', message: '请输入商品重量', trigger: 'blur' }
          ],
          goods_number: [
            { required: 'true', message: '请输入商品数量', trigger: 'blur' }
          ],
          goods_cat: [
            { required: 'true', message: '请选择商品分类', trigger: 'blur' }
          ],
        },
        //基本信息 级联的分类列表数据
        categoriesList: [],
        // 级联选择框的默认配置
        baseCateListProps: {
          value: 'id',
          label: 'label',
          children: 'children'
        },
        //获取到的动态参数列表
        manyDataList: [],
        // 赋值静态参数
        onlyDataList: [],
        //上传图片的地址
        uploadURL: "http://127.0.0.1:8888/api/private/v1/upload",
        //上传的图片数组--如果是点击弹出框上传 不需考虑这个属性
        fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
        //设置图片上传请求头token
        headerObj: {
          Authorization: window.sessionStorage.getItem('token')
        },
        //点击文件名预览时保存 预览地址
        previewFilePath: '',
        //图片预览的dialog显示隐藏字段
        previewDialogVisible: false,
      }
    },
    // 计算属性
    computed: {
      //级联选择框的3级id 判断级联绑定的数组
      getThirdId() {
        if (TagRuleForm.goods_cat.length === 3) {
          return TagRuleForm.goods_cat[2];
        }
        //没有选中3级
        return null
      }
    },
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      //基本信息 级联的分类列表数据获取
      /**async*/ getCategoriesList() {
        // const { data: res } = await this.$http.get("categories")
        // if (res.meta.status !== 200) return this.$message.error("分类列表数据获取失败！")

        //数据获取成功
        // this.categoriesList = res.data;

        //假数据
        this.categoriesList = [{
          value: 'zhinan',
          label: '指南',
          id: 1,
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            id: 11,
            children: [{
              value: 'yizhi',
              label: '一致',
              id: 111
            }, {
              value: 'fankui',
              label: '反馈',
              id: 112
            }, {
              value: 'xiaolv',
              label: '效率',
              id: 113
            }, {
              value: 'kekong',
              label: '可控',
              id: 114
            }]
          }, {
            value: 'daohang',
            label: '导航',
            id: 12,
          }]
        }, {
          value: 'zujian',
          label: '组件',
          id: 2,
          children: [{
            value: 'basic',
            label: 'Basic',
            id: 22
          }, {
            value: 'form',
            label: 'Form',
            id: 23
          }, {
            value: 'data',
            label: 'Data',
            id: 24
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          id: 3,
          children: [{
            value: 'axure',
            id: 31,
            label: 'Axure Components'
          }, {
            value: 'jiaohu',
            id: 32,
            label: '组件交互文档'
          }]
        }]
      },
      //基本信息 的级联选择值改变时触发
      baseHandleChange(value) {
        //级联选择器只能选中 3级 否则置空
        console.log(value);
        console.log(this.TagRuleForm.goods_cat);
        if (this.TagRuleForm.goods_cat.length !== 3) {
          this.TagRuleForm.goods_cat = [];
        }
      },
      // tab页签 切换前钩子函数 参数分别是切换前后的name
      beforeTabLeave(activeName, oldActiveName) {
        if (oldActiveName === "0" && this.TagRuleForm.goods_cat.length !== 3) {
          this.$message.error("请选择商品分类！")
          return false
        }
      },
      //点击tag页签 时触发
      handleTagClick(tag, event) {
        //获取当前tabs的绑定的下标
        console.log(this.currentTabSelName);
        //判断是否商品参数 下标相等 
        if (this.currentTabSelName === "1") {
          //获取参数列表数据
          // const {data:res} = await this.$http.get(`categories/${this.getThirdId}/attributes`,{
          //   params: {
          //     sel: 'many'  //获取动态参数
          //   }
          // })

          // if(res.meta.status!==200) return this.$message.error("参数获取失败！")

          //获取的数据可能是字符串
          // res.data.forEach(item => {
          //   item.attr_vals =  item.attr_vals.length ? item.attr_vals.split(" ") : []
          // });

          this.manyDataList = [
            {
              "id": 36,  //角色id
              "roleName": "主管many",
              "inputValue": '',
              "inputVisible": false,
              // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
              "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
              "roleDesc": "技术负责人",
              "children": [
                {
                  "id": 101,  //权限id
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                    {
                      "id": 104,   //权限id
                      "authName": "商品列表",
                      "path": null,
                      "children": [
                        {
                          "id": 105,   //权限id
                          "authName": "添加商品",
                          "path": null,
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "id": 35,
              "roleName": "测试角色many",
              "roleDesc": "测试角色描述",
              "inputValue": '',
              "inputVisible": false,
              // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
              "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
              "children": [
                {
                  "id": 101,
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                    {
                      "id": 104,
                      "authName": "商品列表",
                      "path": null,
                      "children": [
                        {
                          "id": 105,
                          "authName": "添加商品",
                          "path": null,
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "id": 34,
              "roleName": "部门负责人many",
              "roleDesc": "部门管理",
              "inputValue": '',
              "inputVisible": false,
              // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
              "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
              "children": [
                {
                  "id": 101,
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                    {
                      "id": 104,
                      "authName": "商品列表",
                      "path": null,
                      "children": [
                        {
                          "id": 105,
                          "authName": "添加商品",
                          "path": null,
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]

          console.log(this.manyDataList);
        } else if (this.currentTabSelName === "2") {
          //判断是否是商品属性
          //获取参数列表数据
          // const {data:res} = await this.$http.get(`categories/${this.getThirdId}/attributes`,{
          //   params: {
          //     sel: 'only'  //获取动态参数
          //   }
          // })

          // if(res.meta.status!==200) return this.$message.error("静态参数数据获取失败！")

          //获取的数据可能是字符串
          // res.data.forEach(item => {
          //   item.attr_vals =  item.attr_vals.length ? item.attr_vals.split(" ") : []
          // });

          //赋值静态参数
          this.onlyDataList = [
            {
              "id": 36,  //角色id
              "roleName": "主管only",
              "roleDesc": "技术负责人",
              "inputValue": '',
              "inputVisible": false,
              "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
              "children": [
                {
                  "id": 101,  //权限id
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                    {
                      "id": 104,   //权限id
                      "authName": "商品列表",
                      "path": null,
                      "children": [
                        {
                          "id": 105,   //权限id
                          "authName": "添加商品",
                          "path": null,
                        }
                      ]
                    }
                  ]
                }
              ]
            },

            {
              "id": 35,
              "roleName": "测试角色only",
              "roleDesc": "测试角色描述",
              "inputValue": '',
              "inputVisible": false,
              // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
              "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
              "children": [
                {
                  "id": 101,
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                    {
                      "id": 104,
                      "authName": "商品列表",
                      "path": null,
                      "children": [
                        {
                          "id": 105,
                          "authName": "添加商品",
                          "path": null,
                        }
                      ]
                    }
                  ]
                }
              ]
            },

            {
              "id": 34,
              "roleName": "部门负责人only",
              // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
              "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
              "roleDesc": "部门管理",
              "inputValue": '',
              "inputVisible": false,
              "children": [
                {
                  "id": 101,
                  "authName": "商品管理",
                  "path": null,
                  "children": [
                    {
                      "id": 104,
                      "authName": "商品列表",
                      "path": null,
                      "children": [
                        {
                          "id": 105,
                          "authName": "添加商品",
                          "path": null,
                        }
                      ]
                    }
                  ]
                }
              ]
            }

          ]
          console.log(this.onlyDataList);

        }
      },
      //点击上传的图片名称时----实现预览  file 预览的文件信息  使用dialog实现预览
      handlePreview(file) {
        //需要取 完成路径
        this.previewFilePath = file.response.data.url;

        //展示预览图片的dialog
        this.previewDialogVisible = true;
      },
      /*
      移除上传的图片操作时
      file 要移除的文件
      */
      handleRemove(file, fileList) {
        //file 对象 有要删除文件的临时地址 通过 临时地址循环上传push的数组地址 删除即可
        const delFilePath = file.response.data.tmp_path
        var picsDelFileIndex = TagRuleForm.pics.findIndex(item => item.pic == delFilePath)

        //从当前数组中删除点击删除的对应的临时地址
        this.TagRuleForm.pics.splice(picsDelFileIndex, 1)

        console.log(this.TagRuleForm.pics);
      },
      /**
       * 文件通过action地址上传到服务器成功时的钩子
       * response 响应信息（包含临时地址/）
       * file 文件信息
       * fileList 上传文件的列表
      */
      handleSuccess(response, file, fileList) {
        //根据响应结果 把服务器上传返回结果的临时路径 push到 提交的定义的数组中 
        const picInfo = { pic: response.data.tmp_path }
        TagRuleForm.pics.push(picInfo)

        console.log(this.TagRuleForm.pics);
      },
      //保存商品
      addProductBtn() {

        console.log(this.TagRuleForm.quillEditorVal);

        //商品添加 预校验
        this.$refs.TagRuleFormRulesRef.validate(valid => {
          //校验不通过
          if (!valid) {
            return this.$message.error("请输入必填的表单项！")
          }
         
          // 静态参数/动态参数 数组 {attr_id:'',attr_value: ''} push到attrs中
          this.manyDataList.forEach(item => {
            const newInfo = {
              attr_id: item.id,
              attr_value: item.attr_vals.join(" ")
            }
            //push 到参数数组
            this.TagRuleForm.attrs.push(newInfo)
          });
          // 静态参数 拼接
          this.onlyDataList.forEach(item => {
            const newInfo = {
              attr_id: item.id,
              attr_value: item.attr_vals.join(" ")
            }
            //push 到参数数组
            this.TagRuleForm.attrs.push(newInfo)
          });

          //使用lodash 第三方库 进行深拷贝
          console.log(this.TagRuleForm);
          const cloneTagRuleForm = _.cloneDeep(this.TagRuleForm);

          //对数据进行操作
          cloneTagRuleForm.goods_cat = cloneTagRuleForm.goods_cat.join(",")

          console.log(cloneTagRuleForm);

           // //验证通过
          // const { data: res } = await this.$http.post(`goods`,cloneTagRuleForm);
          // //保存失败
          // if (res.meta.status !== 200) {
          //   return this.$message.error("商品保存失败！")
          // }

          //保存成功
          this.$message.success("商品保存成功！")

          //编程式导航跳转 商品列表
          this.$router.push('/goods')
        })
      }
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {
      // 基本信息 级联的分类列表数据获取
      this.getCategoriesList();
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {
    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {
    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="less">
  .el-checkbox {
    margin: 0 10px 0 0 !important;
  }

  .previewImg {
    width: 100%;
  }

  .addProductBtn {
    margin-top: 10px !important;
  }
</style>